<template>
  <div>
    <!--
        {{ 数据 管道符 方法名 }}
        {{xxx | yyy}}
        本质意思就是 yyy(xxx)
       -->
    <h2>{{ message }}</h2>
    <h2>
      {{ message | fn }}
    </h2>
    <h2>
      <!-- 如果一个方法有多个参数，第一个参数还是管道符前面的这个值，第二个参数，直接写在管道符后面的方法参数里 -->
      {{ message | fn('haha') }}
    </h2>
    <!-- 过滤器还可以多个过滤器按照顺序调用
      多个过滤器按照顺序调用，就在之后再加管道符在加过滤器名字
      本质上就是把前面所有计算出来的结果，在作为第一个参数传入这个函数里
    -->
    <h2>
      {{ message | fn('haha') | foo(false) }}
    </h2>
  </div>
</template>

<script>
export default {
  // filters: {
  //   fn(value, flag = '') {
  //     value = value.toString()
  //     //   return value.charAt(0).toUpperCase() + value.slice(1) + flag
  //     // },
  //     // foo(str, flag = true) {
  //     // return 'heihei-' + str + (flag ? '!' : '?')
  //     // 当全局和局部名字一样的时候，局部优先级高
  //     return '!!!!!!' + value.charAt(0).toUpperCase() + value.slice(1) + flag
  //   }
  // },
  data() {
    return {
      message: 'abc'
    }
  }
}
</script>

<style>

</style>
